/*
 * @Author: 18163104359 2205227953@qq.com
 * @Date: 2024-01-25 18:00:51
 * @LastEditors: NaturalHulk 2066634567@qq.com
 * @LastEditTime: 2024-02-21 14:12:11
 * @FilePath: /umi/src/pages/system/dict/index.jsx
 * @Description: 字典页面
 */

import React, { useState, useEffect, useRef } from "react";
import { Card, Table, Input, message } from "antd";
import { FormOutlined, DeleteOutlined } from "@ant-design/icons";
import { connect, Link, useNavigate } from "umi";
import { DelDataAPI, GetListAPI, GetViewAPI } from "@/api/system/dict.ts";
import FormData from "./form";
import {
  XHbutton,
  XHmodal,
  XHoperate,
  XHtable,
  XHtableForm,
} from "@/components/xh-components/index";
const DictPage = (props) => {
  // 表格枚举
  const columns = [
    {
      title: "字典编号",
      dataIndex: "dictId",
      key: "dictId",
      disabled: true,
    },
    {
      title: "字典名称",
      dataIndex: "dictName",
      key: "dictName",
    },
    {
      title: "字典类型",
      dataIndex: "dictType",
      key: "dictType",
      render: (val, obj) => <Link to={`/kf/dict/data?type=${obj.dictType}`}>{val}</Link>,
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      inputType: "select",
    },
    {
      title: "备注",
      dataIndex: "remark",
      key: "remark",
    },
    {
      title: "创建人",
      dataIndex: "createBy",
      key: "createBy",
    },
    {
      title: "创建时间",
      dataIndex: "createTime",
      key: "createTime",
    },

    // {
    //   title: "操作",
    //   width: "30%",
    //   render: (val) => {
    //     return (
    //       <XHoperate
    //         list={[
    //           {
    //             label: "修改",
    //             emit: () => edit(val),
    //             icon: <FormOutlined />,
    //           },
    //           {
    //             label: "删除",
    //             danger: true,
    //             emit: () => del(val),
    //             showMsg: true,
    //             icon: <DeleteOutlined />,
    //           },

    //           {
    //             label: "查看",
    //             emit: () => see(val),
    //             icon: <DeleteOutlined />,
    //           },
    //         ]}
    //       />
    //     );
    //   },
    //   width: "15%",
    // },
  ];

  // 各种状态
  const [state, setState] = useState({
    loading: false,
    show: false,
    title: "新增",
    btnLoading: false,
  });

  // 表格数据
  const [tableData, setTableData] = useState({
    data: [],
    total: 0,
    pagination: { pageNum: 1, pageSize: 10 },
  });

  // 列表分页
  const [query, setQuery] = useState({
    pageNum: 1,
    paheSize: 10,
  });

  const [dataForm, setDataForm] = useState({});

  // 表单ref
  const formRef = useRef(null);

  //新增弹窗
  const add = (val) => {
    if (val) {
      setDataForm({ ...dataForm, parentId: String(val.dictId) });
    }
    setState({
      ...state,
      show: true,
      title: "新增",
    });
  };

  //修改弹窗
  const edit = async (val) => {
    const { data: res } = await GetViewAPI(val.dictId);
    setDataForm(res);
    setState({
      ...state,
      show: true,
      title: "修改",
    });
  };

  //查看弹窗
  const see = async (val) => {
    const { data: res } = await GetViewAPI(val.dictId);
    setDataForm(res);
    setState({
      ...state,
      show: true,
      title: "查看",
    });
  };

  //取消弹窗
  const close = () => {
    setState({
      ...state,
      show: false,
    });
    setDataForm({}); //清空表单

    getList();
  };

  // 新增提交
  const addSub = async () => {
    const r = await formRef.current.validateFields();
    if (!r) return;
    try {
      setState({
        ...state,
        btnLoading: true,
      });
      await addMenu(r);
      message.success("新增成功!");
      close();
    } catch (err) {
      setState({
        ...state,
        btnLoading: false,
      });
    } finally {
    }
  };

  // 修改提交
  const editSub = async () => {
    const r = await formRef.current.validateFields();
    if (!r) return;
    try {
      setState({
        ...state,
        btnLoading: true,
      });
      await updateMenu({ ...r, dictId: dataForm.dictId });
      message.success("修改成功!");
      close();
    } catch (err) {
      setState({
        ...state,
        btnLoading: false,
      });
    } finally {
    }
  };

  const del = async (val) => {
    try {
      await DelDataAPI(val.dictId);
      getList();
      message.success("删除成功!");
    } catch (error) {}
  };

  // 获取表格数据
  const getList = async (query) => {
    try {
      setState({
        loading: true,
      });
      const result = await GetListAPI(query);
      const arr = result.rows;
      arr.forEach((t) => (t.key = t.dictId));
      setTableData({
        data: arr,
        total: result.total,
      });
    } catch (err) {
      console.log(err);
    } finally {
      setState({
        loading: false,
      });
    }
  };

  return (
    <div className="app-container">
      <Card>
        <XHbutton
          list={[
            {
              label: "新增",
              emit: () => add(),
            },
          ]}
        />
        {/* <XHtableForm
          loading={state.loading}
          columns={columns}
          rowSelection={null}
          data={tableData.data}
          tableDataChange={(val) => {
            setTableData({ ...tableData, data: val });
          }}
        /> */}

        <XHtable
          loading={state.loading}
          columns={columns}
          rowSelection={null}
          dataSource={tableData.data}
          total={tableData.total}
          pagination={(val) => {
            getList({
              ...query,
              ...val,
            });
          }}
        />
        {/* <Table
          loading={state.loading}
          columns={columns}
          renderCell={() => ""}
          rowSelection={null}
          dataSource={tableData.data}
          pagination={query}
        /> */}
      </Card>
      <XHmodal
        open={state.show}
        title={state.title}
        ok={() => (state.title == "新增" ? addSub() : editSub())}
        no={() => close()}
        body={<FormData ref={formRef} data={dataForm} title={state.title} />}
      />
    </div>
  );
};
export default DictPage;
